<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>伯俊微后台</title>

    <link rel="stylesheet" href="assets/css/icon-font.min.css">
    <!--bootstrap.min.css-->
    <link rel="stylesheet" href="assets/css/bootstrap.min.css">
    <link rel="stylesheet" href="assets/css/search_box.css">
    <!--style.css-->
    <link rel="stylesheet" href="assets/css/style.css">
    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">

    <style>
        #shht {
            /*-webkit-box-shadow:3px 3px 3px #c8c8c8 ;
            -moz-box-shadow:3px 3px 3px #c8c8c8 ;*/
            box-shadow: 0 0 7px #c8c8c8;
            display: none;
        }

    </style>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        a {
            text-decoration: none;
        }

        a:hover {
            text-decoration: none;
        }

        .tcdPageCode a {
            display: inline-block;
            color: #428bca;
            height: 25px;
            line-height: 25px;
            padding: 0 10px;
            border: 1px solid #ddd;
            margin: 0 2px;
            border-radius: 4px;
            vertical-align: middle;
        }

        .tcdPageCode a:hover {
            text-decoration: none;
            border: 1px solid #428bca;
        }

        .wind-s {
            width: 50%;
            padding: 20px 20px 15px;
            box-sizing: border-box;
            float: left;
            color: #ffffff;
        }
    </style>
</head>

<body style="font-family: Helvetica Neue,Helvetica,PingFang SC,Hiragino Sans GB,Microsoft;background-color: #e4e7ed">


<div id="wrapper">


    <nav class="navbar navbar-default navbar-fixed-top">

        <div class="brand" style="overflow: hidden;width: 12.6%;">

            <h2 style="color: #fcfdfd">控制台</h2>

        </div>

        <div class="container-fluid">
            <div class="navbar-btn">
                <button type="button" class="btn-toggle-fullwidth">
                    <i class="lnr lnr-arrow-left-circle"></i>
                </button>
            </div>

            <form class="navbar-form navbar-left" style="margin-bottom: 0;">
                <div style="line-height: 50px;font-weight: bold;">
                    <a href="#"
                       style="display: block;float: left;padding: 0 15px;margin: 0 10px;cursor: pointer;padding-bottom: 10px;;">总览</a>
                    <a href="javascript:void(0);" id="shht-sj"
                       style="display: block;float: left;padding: 0 15px;margin: 0 10px;cursor: pointer;padding-bottom: 10px;">
                        商户后台
                        <span class="fa fa-angle-down"
                              style="font-size:25px;position: absolute;margin: 12px 0 0 2px;">  </span>
                    </a>
                    <a href="bos-config.html"
                       style="display: block;float: left;padding: 0 15px;margin: 0 10px;cursor: pointer;padding-bottom: 10px;">系统设置</a>
                    <a href="wechat-index.html"
                       style="display: block;float: left;padding: 0 15px;margin: 0 10px;cursor: pointer;padding-bottom: 10px;">微生活</a>
                </div>
            </form>
            <div id="shht"
                 style="width: 500px;height: 300px;position: absolute;top: 67px;left: 100px;background-color: #fcfdfd">

                <div style="margin-left: 180px;">
                    <h4 style=" margin: 40px 0 22px 35px; color: black; font-size: 15px;">
                        <b>会员管理</b></h4>
                    <ul style="list-style:none;font-size: 12px;margin: 20px 0 30px 35px;">
                        <li style="margin: 15px 0 0 0;"><a href="vip-wx.html">会员列表</a></li>
                        <li style="margin: 15px 0 0 0;"><a href="vip-label.html">会员标签</a></li>
                        <!-- <li style="margin: 15px 0 0 0;"><a href="#">会员列表</a></li>-->
                    </ul>
                </div>

                <div style="margin-left: 70px;margin-top: -148px;">
                    <h4 style=" margin: 62px 0 22px 35px; color: black; font-size: 15px;">
                        <b>门店管理</b></h4>
                    <ul style="list-style:none;font-size: 12px;margin: 20px 0 30px 35px;">
                        <li style="margin: 15px 0 0 0;"><a href="store.html">门店列表</a></li>
                        <!-- <li style="margin: 15px 0 0 0;"><a href="#">门店体系</a></li>
<li style="margin: 15px 0 0 0;"><a href="#">门店状态</a></li>-->
                    </ul>
                </div>
                <div style="margin-left: 70px;">
                    <h4 style=" margin: 62px 0 22px 35px; color: black; font-size: 15px;">
                        <b>营销活动</b></h4>
                    <ul style="list-style:none;font-size: 12px;margin: 20px 0 30px 35px;">
                        <li style="margin: 15px 0 0 0;"><a href="coupon-y.html">优惠券</a></li>
                        <li style="margin: 15px 0 0 0;"><a href="activity.html">活动管理</a></li>
                    </ul>
                </div>

            </div>
            <div class="navbar-menu">
                <ul class="nav navbar-nav navbar-right">

                    <li class="dropdown">

                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                            <!--<img src="assets/images/parson.png" class="img-circle" alt="parson-img">-->
                            <span style="font-size: 15px;color: #000;">账户信息</span>
                            <i class="icon-submenu fa fa-angle-down"></i>
                        </a>

                        <ul class="dropdown-menu">
                            <li><a href="#"><i class="lnr lnr-user"></i> <span>账户信息</span></a></li>
                            <li><a href="change-password.html"><i class="lnr lnr-cog"></i> <span>修改密码</span></a></li>
                            <li id="e-exit"><a href="#"><i class="lnr lnr-envelope"></i> <span>退出登录</span></a></li>
                        </ul>

                    </li>
                </ul>
            </div>
        </div>

    </nav>

    <!-- MAIN -->
    <div class="main" style="position: relative; float: left;width: 100%;">


        <div id="top" style="width: 100%;height: 2000px;margin-left: 1.5%;background-color: #ffffff">
            <a name="miao"></a>
            <div style=";width: 100%;height: 70px;
                    border-bottom: 1px solid #dcdfe6;
                    padding: 1.5%;font-size: 16px;font-weight: 700;color: #000000">
                会员
            </div>
            <div class="total">
                <a name="miao"></a>
                <div id="wind1"
                     style="width: 31%;height: 190px;background-color: #8543e0;margin: 2% 0 3% 2%;float: left;border-radius:5px">
                    <p style="color: #ffffff;padding: 4% 0 0 3%;">会员总数</p>
                    <p id="data_1" style="color: #ffffff; margin: 20px;font-size: 60px;">0</p>
                </div>
                <div id="wind2"
                     style="width: 31%;height: 190px;background-color: #1890ff;margin: 2% 1% 3% 1%;float: left;border-radius:5px">
                    <div class="wind-s">
                        <p>昨日新增</p>
                        <p id="data_2" style="font-size: 30px;">00</p>
                    </div>
                    <div class="wind-s">
                        <p>今日新增</p>
                        <p id="data_3" style="font-size: 30px;">00</p>
                    </div>
                    <div class="wind-s">
                        <p>昨日会员率</p>
                        <p id="data_4" style="font-size: 30px;">00%</p>
                    </div>
                    <div class="wind-s">
                        <p>今日会员率</p>
                        <p id="data_5" style="font-size: 30px;">00%</p>
                    </div>
                </div>

                <div id="wind3"
                     style="width: 31%;height: 190px;background-color: #13c2c2;margin: 2% 0 3% 0;float: left;border-radius:5px">
                    <div class="wind-s">
                        <p>上月新增</p>
                        <p id="data_6" style="font-size: 30px;">00</p>
                    </div>
                    <div class="wind-s">
                        <p>本月新增</p>
                        <p id="data_7" style="font-size: 30px;">00</p>
                    </div>
                    <div class="wind-s">
                        <p>上月会员率</p>
                        <p id="data_8" style="font-size: 30px;">00%</p>
                    </div>
                    <div class="wind-s">
                        <p>本月会员率</p>
                        <p id="data_9" style="font-size: 30px;">00%</p>
                    </div>
                </div>
            </div>

            <div style="position: relative;width: 100%">

                <div id="view-data" style="height: 400px;width: 130%;margin-left: -10%"></div>

            </div>

            <div style="position: relative">
                <div style="position: absolute;width: 40%;left: 50%;top: 400px;">
                    <div id="container"
                         style="height: 500px;width: 600px;position: fixed; ">
                    </div>
                </div>
                <div style="position: absolute;width: 45%;top: 410px;">
                    <h4 style="margin-left: 30%;font-weight: 600; color: #000000db;position: absolute;">零售数据</h4>
                    <div id="gender-c"
                         style="height: 500px;width: 500px;position: fixed; "></div>
                </div>
            </div>

        </div>

    </div>

</div>

</div>


<div class="clearfix"></div>

</div>

<script src="js/jquery.min.js"></script>
<script src="assets/js/fontawesome-all.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>

</body>
<script type="text/javascript" src="js/echarts.min.js"></script>
<script src="assets/js/jq.page.js"></script>

<script type="text/javascript">
    var data_key = [];
    var data_val = [];
    $(document).ready(
        $.ajax({
            "url": "/view/retail/",
            "type": "POST",
            "dataType": "json",
            "success": function (json) {
                var map = json.data;
                for (var k in map) {  //通过定义一个局部变量k遍历获取到了map中所有的key值
                    data_key.push(k);
                    var docList = map[k]; //获取到了key所对应的value的值！
                    data_val.push(docList)
                }
                var dom = document.getElementById("gender-c");
                var myChart = echarts.init(dom);

                var option = {
                    color: ['#3398DB'],
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: [
                        {
                            type: 'category',
                            data: data_key,
                            axisTick: {
                                alignWithLabel: true
                            }
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value'
                        }
                    ],
                    series: [
                        {
                            name: '零售数量',
                            type: 'bar',
                            barWidth: '60%',
                            data: data_val
                        }
                    ]
                };

                if (option && typeof option === "object") {
                    myChart.setOption(option, true);
                }

            }
        })
    );

</script>
<script type="text/javascript">

    var dataw = [];
    var datam = [];
    $(document).ready(
        $.ajax({
            "url": "/view/vip/",
            "type": "POST",
            "dataType": "json",
            "success": function (json) {
                dataw = json.data;
                for (var i = 0; i < json.data.length; i++) {
                    datam.push(json.data[i].name);
                }

                var dom = document.getElementById("container");
                var myChart = echarts.init(dom);

                var option = {
                    title: {
                        text: 'VIP会员等级占比',

                        x: 'center'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'right',
                        data: datam
                    },

                    series: [
                        {
                            name: '会员数量',
                            type: 'pie',
                            radius: '70%',
                            center: ['50%', '60%'],
                            data: dataw,
                            itemStyle: {
                                emphasis: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                };

                if (option && typeof option === "object") {
                    myChart.setOption(option, true);
                }

            }
        }));


</script>

<script>
    $(document).ready(
        $.ajax({
            "url": "/view/mainview/",
            "type": "POST",
            "dataType": "json",
            "success": function (json) {
                console.log(json);
                var data1 = [];
                var data2 = [];
                var data3 = [];
                var map = {};
                var list = [];

                var qty1 = 0;
                var qty2 = 0;

                map = json.data.data;

                $("#data_1").html(map.vipQty);
                $("#data_2").html(map.yAndQty);
                $("#data_3").html(map.tAndQty);
                $("#data_4").html(map.yAndRate);
                $("#data_5").html(map.tAndRate);
                $("#data_6").html(map.lmAndRate);
                $("#data_7").html(map.tmAndQty);
                $("#data_8").html(map.lmAndQty);
                $("#data_9").html(map.tmAndRate);

                list = json.data.view;

                for (var i = 0; i < list.length; i++) {
                    data1.push(list[i].date);
                    data2.push(list[i].rate);
                    qty1 = qty1 + parseInt(list[i].rate);
                    data3.push(list[i].qty);
                    qty2 = qty2 + parseInt(list[i].qty);
                }
                console.log("qty1=" + qty1 + "qty2=" + qty2);
                qty1 = Math.round((qty1 / list.length) * 2);
                qty2 = (qty2 / list.length) * 3;
                console.log("qty1=" + qty1 + "qty2=" + qty2);
                var dom = document.getElementById("view-data");
                var myChart = echarts.init(dom);

                var colors = ['#d14a61', '#5793f3', '#5793f3'];

                var option = {
                    color: colors,

                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross'
                        }
                    },
                    grid: {
                        right: '20%'
                    },
                    toolbox: {
                        feature: {
                            dataView: {show: true, readOnly: false},
                            restore: {show: true},
                            saveAsImage: {show: true}
                        }
                    },
                    legend: {
                        data: ['新增会员', '会员率']
                    },
                    xAxis: [
                        {
                            type: 'category',
                            axisTick: {
                                alignWithLabel: true
                            },
                            data: data1
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            name: '会员率',
                            min: 0,
                            max: qty1,
                            position: 'left',
                            axisLine: {
                                lineStyle: {
                                    color: colors[0]
                                }
                            },
                            axisLabel: {
                                formatter: '{value}%'
                            }
                        },
                        {},
                        {
                            type: 'value',
                            name: '新增会员',
                            min: 0,
                            max: qty2,
                            position: 'right',
                            axisLine: {
                                lineStyle: {
                                    color: colors[2]
                                }
                            },
                            axisLabel: {
                                formatter: '{value}人'
                            }
                        }
                    ],
                    series: [
                        {
                            name: '会员率',
                            type: 'line',
                            data: data2
                        },
                        {
                            name: '新增会员',
                            type: 'bar',
                            yAxisIndex: 2,
                            data: data3
                        }
                    ]
                };

                if (option && typeof option === "object") {
                    myChart.setOption(option, true);
                }

            }
        }));


</script>
<script>

    $("#shht-sj,#shht").hover(function () {
        // 鼠标移入时添加hover类

        $("#shht").css('display', 'inline')
    }, function () {
        // 鼠标移出时移出hover类

        $("#shht").css('display', 'none')
    });

    $(".sb-tr").hover(function () {
        // 鼠标移入时添加hover类

        $(this).css('background-color', 'rgba(226,238,252,0.88)')
    }, function () {
        // 鼠标移出时移出hover类

        $(this).css('background-color', '#ffffff')
    });

</script>
<script>
    $("#e-exit").click(function () {
        $(document).ready(
            $.ajax({
                "url": "/backend/exit/",
                "type": "POST",
                "success": function () {

                    location.href = "login-system.html"
                }
            }))
    })
</script>
<script>
    $("#wind1").hover(function () {
        // 鼠标移入时添加hover类
        $(this).css('background-color', '#a245ff')
    }, function () {
        // 鼠标移出时移出hover类
        $(this).css('background-color', '#8543e0')
    });
    $("#wind2").hover(function () {
        // 鼠标移入时添加hover类
        $(this).css('background-color', '#39a4ff')
    }, function () {
        // 鼠标移出时移出hover类
        $(this).css('background-color', '#1890ff')
    });
    $("#wind3").hover(function () {
        // 鼠标移入时添加hover类
        $(this).css('background-color', '#13cccc')
    }, function () {
        // 鼠标移出时移出hover类
        $(this).css('background-color', '#13c2c2')
    });
</script>
</html>